<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>多人聊天室</title>
    <link rel="stylesheet" type="text/css" href="plugins/bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css"/>
    <script type="text/javascript" src="plugins/vue/vue.min.js"></script>
    <script type="text/javascript" src="plugins/axios/axios.min.js"></script>
    <script TYPE="text/javascript" src="main.js"></script>
    <script src="//cdn.bootcss.com/sockjs-client/1.1.1/sockjs.min.js"></script>
</head>
<body>
<div id="app" class="container" style="margin-top: 20px">
    <div style="height: 150px;width: 100%">
        <div class="card" style="width: 100%;height: 100%">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <input type="text" v-model="form.name" class="form-control" placeholder="请输入您的昵称">
                    </div>
                    <div class="col">
                        <input type="text" class="form-control" v-model="form.msg" placeholder="请输入你要发送的内容">
                    </div>
                </div>
                <div class="row" style="margin-top: 20px">
                    <div class="col">
                        <button type="button" class="btn btn-outline-warning" style="width: 30%" @click="online">上线
                        </button>
                        <button type="button" class="btn btn-outline-danger" style="width: 30%" @click="outline">下线
                        </button>
                        <button type="button" class="btn btn-outline-success" style="width: 30%" @click="sendMsg">发送
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="height: 500px;width: 100%;border: 1px solid #000;overflow: auto;margin-top: 20px;margin-bottom: 30px;padding: 20px">
        <ul class="content-reply-box mg10">
            <li v-for="item in chatList" :class="item.flow">
                <!--                <div :class="'reply-content pr '+ (item.flow === 'odd'? 'float-left':'float-right')">-->
                <!--                    <span class="arrow">&nbsp;</span>-->
                <!--                    {{item.msg}}-->
                <!--                </div>-->
                <a class="user" href="javascript:void(0)"><img class="img-responsive avatar_" src="images/avatar-1.png"
                                                               alt=""><span class="user-name">{{item.name}}</span></a>
                <div class="reply-content-box">
                    <span class="reply-time">03-08 15：00</span>
                    <div :class="'reply-content pr '+ (item.flow === 'odd'? 'float-left':'float-right')">
                        <span class="arrow">&nbsp;</span>
                        {{item.msg}}
                    </div>
                </div>
            </li>
        </ul>


    </div>
</div>

</body>
<script>
    let ws = null;
    new Vue({
        el: "#app",
        data: {
            transports: [],
            isConnected: false,
            form: {
                name: null,
                msg: null
            },
            chatList: [
                {
                    'name': '张三',
                    msg: '你好，欢迎来到闲扯直播间来到闲扯直播间来到闲扯直播间来到闲扯直播间',
                    'flow': 'even'
                },
                {'name': '张三', msg: '你好，欢迎来到闲扯直播间', 'flow': 'even'},
                {'name': '张三', msg: '你好，欢迎来到闲扯直播间', 'flow': 'even'},
                {'name': '小红', msg: '你好，欢迎来到闲来到闲扯直播间扯直播间', 'flow': 'odd'},
                {'name': '小明', msg: '你好，欢迎来到闲扯直播间', 'flow': 'odd'},
                {
                    'name': '张三',
                    msg: '你好，欢迎来到来到闲扯直播间来到闲扯直播间来到闲扯直播间闲扯直播间',
                    'flow': 'even'
                },
                {'name': '张三', msg: '你好，欢迎来到闲扯直播间', 'flow': 'even'},
                {'name': '小白', msg: '你好，欢迎来到来到闲扯直播间闲扯直播间', 'flow': 'odd'},
                {'name': '张三', msg: '你好，欢迎来到闲扯直播间', 'flow': 'odd'},
                {'name': '小哥', msg: '你好，欢迎来到来到闲扯直播间闲扯直播间', 'flow': 'odd'},
            ]
        },
        methods: {
            online() {
                ws = new SockJS(conn_url, undefined, this.transports);

                ws.onopen = function () {
                    this.isConnected = true;
                    //通过发送一条带有特殊符号的信息告诉后台登陆者的昵称，很蛋疼
                    //最好是可以在创建连接时就将这个信息一并带回服务器的，但是我还没找到可以用的这样的方法
                    ws.send('|' + this.form.name);
                    log('服务器连接成功!');
                    log('欢迎来到文哥的群聊室，大家可以畅所欲言啦，想说啥就说啥~~~');
                };
                ws.onmessage = function (event) {
                    log(event.data);
                };
                ws.onclose = function (event) {
                    this.isConnected = false;
                    if (event.code === 1007) {
                        log('小样，昵称太长了!');
                    }
                    log('断开连接!');
                    this.isConnected = false;
                };
            },
            outline() {
                if (ws != null) {
                    ws.close();
                    ws = null;
                }
                this.isConnected = false;
            },
            sendMsg() {
                if (ws != null) {
                    if (!this.form.msg) {
                        alert("请输入内容");
                        return;
                    }
                    if (this.form.msg.length > 100) {
                        alert('太长了，明显是来刷屏的啊!');
                        return;
                    }
                    ws.send(this.form.msg, 'even');
                    this.form.msg = null;
                }
            },
            log(message, type) {
                if (type) {

                }
            }
        }

    })
</script>
</html>